<template>
  <view class="warp">
    <!-- background pic start -->
    <view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
      <!-- <image :src="imgBaseUrl + 'user/login-bg.png'" mode="widthFix" class="bg-img"></image> -->
      <view class="logo-contnt flex align-center justify-center flex-direction">
        <view class="logo width-180 height-180"></view>
        <!-- <view>欢迎来到fust-UI</view> -->
      </view>
    </view>
    <!-- background pic end -->
  
    <!-- 密码login start -->
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/phone.png'" mode="widthFix"></image>
      <input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
        :placeholder="i18n['请输入手机号']" name="input" />
    </view>
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/yzm.png'" mode="widthFix"></image>
      <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
          type="number" v-model="vercode" :placeholder="i18n['请输入验证码']" minlength="4"/>
        <view class="text-vecode" @click="handleSendVerCode">
          {{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}
        </view>
      </view>
    </view>
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/pwd.png'" mode="widthFix"></image>
      <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'password'"
          type="password" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'text'"
          type="text" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
        <image class="width-34" :src="imgBaseUrl + 'user/open.png'" :data-type="type" @click.stop="is_kejian"
          v-if="type == 'text'" mode="widthFix"></image>
        <image class="width-34" :src="imgBaseUrl + 'user/close.png'" :data-type="type" @click.stop="is_kejian"
          v-if="type == 'password'" mode="widthFix"></image>
      </view>
    </view>
    <!-- 邀请码start -->
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="require('@/static/yqm.png')" mode="widthFix"></image>
      <input type="text" v-model="invite_code" placeholder-class="fu-fs32 text-bf"
        :placeholder="i18n['请输入邀请码']"/>
    </view>
    <!-- 邀请码end -->
    <!-- 密码login end -->
    <!-- 立即登录按钮 start -->
    <button type="success" class="text-white margin-lr-lg margin-top-lg bg-theme fu-fs32 round"
      shape="circle" @click="reg">
      {{i18n['注册']}}
    </button>
    <!-- 立即登录按钮 end -->
    <view class="text-center margin-top">
      {{i18n['已有账号，前去']}}
      <text class="text-theme" @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/login-password/index">{{i18n['登录']}}</text>
    </view>
    <view class="footer">
      <!-- 协议同意 start -->
      <view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree" :src="imgBaseUrl + 'checked.png'"></image>
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
          :src="imgBaseUrl + 'unchecked.png'"></image>
        <view>
          {{i18n['已阅读并同意']}}
          <text class="text-theme text-bold" @tap="handleJump"
            data-url="/pages/user/login/user-agreement/index?id=1">《用户协议》</text>
          {{i18n['与']}}
          <text class="text-theme text-bold" @tap="handleJump"
            data-url="/pages/user/login/user-agreement/index?id=2">{{i18n['《隐私政策》']}}</text>
        </view>
      </view>
      <!-- 协议同意 end -->
    </view>
	
	<fu-popup v-model="isShow1" mode="center" :maskClick="true" >
		<view class="ts-box flex flex-direction  justify-between align-center" >
			<view class="text-bold" style="font-size: 40rpx;margin-bottom: 40rpx;">
				提示
			</view>
			<text class="text-666">{{msg}}</text>
			<view class="tc-btn" @click="cancle">
				我知道了
			</view>
		</view>
	</fu-popup>
	<fu-popup v-model="isShow2" mode="center" :maskClick="true" >
		<view class="ts-box flex flex-direction  justify-between align-center" >
			<view class="text-bold" style="font-size: 40rpx;margin-bottom: 40rpx;">
				提示
			</view>
			<text class="text-666">{{msg}}</text>
			<view class="tc-btn" @click="kt">
				去开通
			</view>
		</view>
	</fu-popup>
	<fu-popup v-model="isShow" mode="center" :maskClick="false">
		<view class="ts-box flex flex-direction  justify-between align-center" >
			
			<text class="text-666">{{msg}}</text>
			
		</view>
	</fu-popup>
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
	<view class="registerPopup" @click="quitLogin" v-if="mewShow">
		<view class="registerBj">
			<view class="CatCoinNum">{{`+${catCoinNum}喵币`}}</view>
		</view>
		<image src="../../../../static/popup/quit.png" mode="" class="quitImg" @click.stop="quitLogin()"></image>
	</view>
  </view>
</template>
<script>
  import {
  	SYSTEM_CONFIG
  } from "@/common/config.js";
  // 引入验证方法
  import { validate } from "@/common/utils/index";
  export default {
    data() {
      return {
        is_select_agree: false,
        phone: "", // 手机号,@String
        password: '', //密码
        vercode: "", // 验证码,@String
        invite_code:'',//邀请码
        type: 'password', //密码类型
        isLoading: false, // 立即登录按钮是否点击,@Boolean
        time: 60, // 倒计时60S,@Number
        beginning: false, // 显示倒计时,@Boolean
        timer: null, // 计时器,@Function
		msg:'',
		isShow1:false,
		isShow2:false,
		isShow:false,
		catCoinNum:0,//猫币
		mewShow:false
      };
    },
    onUnload() {
      // 页面关闭时清除计时器，优化性能
      clearInterval(this.timer);
    },
    methods: {
		// 返回登录页
		quitLogin(){
			this.mewShow = false
			uni.switchTab({
				url:'/pages/tab/home/shopindex/index'
			})
		},
		kt(){
			uni.redirectTo({
				url:'/pages/member/vip/vip/index'
			})
		},
		// 取消登录
		cancle() {
			uni.navigateBack();
		},
      /**
       * @param 是否选择同意协议
       */
      handle_select() {
        this.is_select_agree = !this.is_select_agree
      },


      /**
       * @event 发送验证码
       */
      handleSendVerCode() {
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        // 如果有倒计时，return false
        if (this.beginning) return false;
        if(!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
        // 从this里结构出来phone
        let {
          phone
        } = this;

        // 验证手机号strat
        if (!phone) return this.$message.info(this.i18n["请输入手机号"]);
        if (!validate(phone, "phone")) return this.$message.info(this.i18n["请正确输入手机号"]);
        // 验证手机号 end
        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
        /**
         * @desc 请求验证码接口
         * @param {Object} {} - 参数
         * @param {Boolean} {}.is_test - 是否是测试环境
         * @param {String} {}.mobile - 手机号
         * @param {String} {}.type - 类型
         */
        this.$api
          .post(global.apiUrls.GetVerifyCode, {
            is_test: global.IS_DEV,
            mobile: phone,
            type: "1",
          })
          .then((res) => {console.log("发送验证码: ", res);
            // 改加载状态为false

            // 如果后台返回的code码为1
            if (res.data.code == 1) {
              this.beginning = true; // 显示倒计时
              // 清除倒计时,防抖作用
              clearInterval(this.timer);
              this.timer = setInterval(() => {
                if (this.time == 1) {
                  //倒计时结束就清楚这个倒计时
                  clearInterval(this.timer);
                  this.time = 60; // 倒计时60s
                  this.beginning = false; // 是否显示倒计时改为false
                  return;
                }
                this.time--;
              }, 1000);
              // 向用户发送提示
              if (res.data.data.code) {
                this.$message.info(this.i18n['验证码为'] + res.data.data.code + this.i18n['请注意查收']);
                this.vercode = res.data.data.code;
              }
              // 把按钮的状态改为false
              this.isLoading = false;
            } else {
              // 把按钮的状态改为false
              this.isLoading = false;
              // 如果报错，向用户提示
              this.$message.info(res.data.msg);
            }
          })
          .catch(function(err) {
            // 把按钮的状态改为false
            this.isLoading = false;
          });
      },

      //密码是否可见
      is_kejian(e) {
        let type = e.currentTarget.dataset.type;
        if (type == 'password') {
          this.type = 'text';
        } else {
          this.type = 'password';
        }
      },
	  
	   postVerifyInviteCode(inviteCode){
		
	  },

      /**
       * @description 注册
       * */
      reg() {
        // #ifdef APP-PLUS
        plus.key.hideSoftKeybord();
        // #endif
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        if(!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
        let {
          phone,
          vercode,
          password,
          invite_code
        } = this;
        // 验证表单数据是否正确
        if (!phone) return this.$message.info(this.i18n['请输入手机号']);
        if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
        if (!vercode) return this.$message.info(this.i18n['验证码不能为空']);
        if (!validate(password, 'password')) return this.$message.info(this.i18n['请输入字母加数字6-12位密码']);
        let clientId = 'clientId'
        let appSystem = 'appSystem'
        
        // #ifdef APP-PLUS
        clientId =  '';
        appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
        // #endif
        // 上述验证都通过，将按钮的点击状态改为true
		
		
		
        this.isLoading = true;
		
		this.$api.post(global.apiUrls.postVerifyInviteCode,{
			invite_code:invite_code
		}).then(result => {
			// uni.setStorageSync('invite_code',inviteCode)
			if (result.data.code == 1) {
				console.log('jinlaimei1')
				// 请求注册接口
				this.$api.post(global.apiUrls.postRegisterByMobile, {
				  mobile: phone,
				  code: vercode,
				  type: 1,
				  password: password,
				  invite_code: invite_code,
				  user_source: SYSTEM_CONFIG.platform,
				  clientId,
				  appSystem
				}).then(res => {
				  if (res.data.code == 1 && res.data.data) {
				    // this.$message.info('注册成功');
				    this.$store.commit('updateUserInfo', res.data.data.userinfo);
					this.isLoading = false;
					this.getMewPopUp()
				    // setTimeout(() => {
				    //   this.isLoading = false;
				    //   uni.navigateBack();
				    // }, 800);
				  } else {
				    this.isLoading = false;
				    this.$message.info(res.data.msg);
				  }
				  
				  // if (res.data.code == 1 && res.data.data) {
				  // 	// 保存用户信息到 store 中
				  // 	this.$store.commit('updateUserInfo', res.data.data.userinfo);
				  // 	// this.msg = res.data.msg
				  // 	// this.isShow2 = true
				  	
				  	
				  // 	// uni.navigateBack();
				  // } else {
				  // 	//-2 第一位注册邀请用户  -1邀请人数已达上限  1是否去开通会员 
				  // 	this.msg = res.data.msg
				  // 	if(res.data.code == -2){
				  // 		// this.$message.info(res.msg);
				  // 		this.$store.commit('updateUserInfo', res.data.data.userinfo);
				  // 		this.isShow = true
				  	
				  // 		setTimeout(()=>{
				  // 			this.isShow = false
				  // 			uni.navigateBack(
				  			
				  // 			)
				  // 		},1000)
				  // 	}else if(res.code== '-1'){
				  // 		// this.$store.commit('updateUserInfo', res.data.userinfo);
				  // 		this.isShow1 = true
				  // 	}else{
				  // 		this.$message.info(res.data.msg);
				  // 	}
				  // }
				  
				  
				  
				  
				}).catch(error => {
				  // 把按钮的状态改为false
				  this.isLoading = false;
				});
			}else{
				console.log('jinlaimei33')
				this.$message.info('该邀请码无效')
			}
		}).catch(err => {})   
      },
	  // 获取喵币弹窗
	  getMewPopUp(){
		this.$api.post(global.apiUrls.postMewConfig).then(res=>{
			if(res.data.code == 1){
				let data = res.data.data
				if(data.mb_status == 1 && data.mew_newuser == 1){
					this.catCoinNum = data.new_user_song
					this.mewShow = true
				}else{
				uni.switchTab({
					url:'/pages/tab/home/shopindex/index'
				})
			}
			}
		})
	  }
    },
  };
</script>
<style lang="scss">
	.CatCoinNum{
		color: #FF6C34;
		font-size: 36rpx;
		font-weight: 800;
		position: absolute;
		bottom: 150rpx;
		left:50%;
		transform: translateX(-50%);
	}
	.registerBj{
		width: 682rpx;
		height: 658rpx;
		position: relative;
		background: url('https://localelife.chunchuang.cn/static/popup/rgtbg.png') no-repeat;
		background-size: 100%;
	}
	.quitImg{
		width: 68rpx;
		height: 68rpx;
		margin-top: 75rpx;
	}
	.registerPopup{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.ts-box{
		padding: 44rpx;
		width: 510rpx;
		// height: 424px;
		background: #FFFFFF;
		border-radius: 24rpx;
		opacity: 1;
	}
	.tc-btn{
		width: 308rpx;
		height: 80rpx;
		background: #B82441;
		border-radius: 44rpx;
		text-align: center;
		line-height: 80rpx;
		opacity: 1;
		color: #ffffff;
		margin-top: 48rpx;
	}
  // 主体 start
  .warp {
    background: #fff;
    min-height: 100vh;
    overflow: hidden;
  
    // background pic start
    .bg {
      width: 100%;
      position: relative;
      .bg-img {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
      }
      .logo-contnt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .logo {
          background-image: url(https://localelife.chunchuangkeji.cn/h5img/logo.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          border-radius: 40rpx;
          overflow: hidden;
        }
      }
    }
    // background pic end
    // 验证码login end
  }
  // 主体 end
  .footer{
    position: fixed;
    bottom: 116rpx;
    bottom: calc(116rpx + constant(safe-area-inset-bottom));
    bottom: calc(116rpx + env(safe-area-inset-bottom));
    width: 100%;
  }
</style>
